<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="searchInput">
			<image class="search_icon" src="https://img-blog.csdnimg.cn/20210316161109714.png"></image>
			<input placeholder="搜索关键词" style="font-size: small;"/>
		</view>
		<!-- 新建班级 -->
		<view class="content">
			<view style="display: flex; flex-direction: row;">
				<view class="title">
					<view style="font-size: medium; margin-left: 270rpx; margin-top: 18rpx;">{{className}}</view>
				</view>
				<image src="../../static/classtitle.png" style="width: 30rpx; height: 30rpx; margin-left: 0rpx; margin-top: 26rpx;"></image>
				<image src="../../static/add.png" style="width: 30rpx; height: 30rpx; margin-top: 26rpx; margin-left: 160rpx;" @click="addlist"></image>
			</view>
			<view class="divider"></view>
		</view>
		<view class="content" v-for="(item, index) in memberList" :key="index">
			<view style="display: flex; flex-direction: column;">
				<view style="display: flex; flex-direction: row;">
					<!-- 头像 -->
					<view class="memeber_image">
						<image :src="item.img"  mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="member" style="display: flex; flex-direction: row; margin-left: 0rpx; margin-top: 34rpx;">
						<text>{{item.name}}</text>
					</view>
					<!-- 类型 -->
					<view class="member" style="margin-left: 280rpx; margin-top: 34rpx; margin-bottom: auto;  color: #FD973F;">
						{{item.type}}
					</view>
				</view>
				<view class="divider" style="margin-top: 15rpx;"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				className: '',
				memberList: [
					{
						index: 0,
						img: "../../static/teacher1.png",
						name: "叶耀明",
						type: "老师"
					},
					{
						index: 1,
						img: "../../static/teacher2.png",
						name: "熊栩彬",
						type: "老师"
					},
					{
						index: 2,
						img: "../../static/teacher3.png",
						name: "方佳佳",
						type: "学生"
					},
					{
						index: 3,
						img: "../../static/student1.png",
						name: "徐如山",
						type: "学生"
					},
					{
						index: 4,
						img: "../../static/student2.png",
						name: "叶克丽",
						type: "学生"
					},
					{
						index: 5,
						img: "../../static/student3.png",
						name: "郝家豪",
						type: "学生"
					},
					{
						index: 6,
						img: "../../static/student4.png",
						name: "郑初",
						type: "学生"
					}
				]
			}
		},
		onLoad(e) {
			let className = e.className;
			className = className.split("(")[1];
			this.className = className.substring(0, className.length - 1);
		},
		methods: {
			
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		/* height: 1334rpx; */
		background-color: #F3F5F7;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: center;
		/* justify-content: center; */
	}
	.content {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}
	.divider {
		height: 3rpx;
		width: 100%;
		background-color: #E6E6E6;
		margin-top: 10rpx;
	}
	.searchInput{
		background-color: #fff;
		width: 720rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		border-radius: 40rpx;
		display: flex;
		padding-left: 30rpx;
		align-items: center;
	}
	.search_icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 20rpx;
	}
	.title {
		width: 500rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-weight: 600;
		border-radius: 40rpx;
		background-color: #fff;
	}
	.member {
		width: 750rpx;
		height: fit-content;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}
	.memeber_image {
		width: 100rpx;
		height: fit-content;
		float: left;
		margin-left: 20rpx;
		margin-right: 30rpx;
		justify-content: center;
	}
	.memeber_image image{
		width: 72rpx;
		height: 72rpx;
		margin-top: 20rpx;
		margin-left: 10rpx;
	}
	
</style>
